<!-- 业态完成与上年对比 -->
<template>
  <div class="dy-panel">
    <div class="dy-panel-main" style="width: 90vh">
      <div class="dy-panel-header">
        <div class="dy-panel-close" @click="closeCurrent"></div>
      </div>
      <div class="dy-panel-content">
        <contentTitle :title="'业态完成与上年对比'"></contentTitle>
        <div class="dy-content-md">
          <div class="dy-md-x4" v-for="(row,index) in dataList">
            <div class="dy-md-x4-left">
              <img :src="row.src" alt="" />
              <div class="dy-md-x4-center">{{row.title}}</div>
            </div>
            <div class="dy-md-x4-right">
              <div class="dy-md-x4-p">
                <div class="dy-md-x4-p-text">增减率</div>
                <div class="dy-md-x4-p-value">{{row.zjl}}</div>
              </div>
              <div class="dy-md-x4-p">
                <div class="dy-md-x4-p-text">上年完成</div>
                <div class="dy-md-x4-p-value">{{row.snwc}}</div>
              </div>
              <div class="dy-md-x4-p">
                <div class="dy-md-x4-p-text">今年完成</div>
                <div class="dy-md-x4-p-value">{{row.jnwc}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {computed, onMounted, ref} from "vue";
import ContentTitle from "../contentTitle.vue";
import {ajaxRequest} from "../../../api/code.js";
import yzxs from '../../../assets/img/sale_more/service-station.png'
import jqxs from '../../../assets/img/sale_more/aerate.png'
import cdxs from '../../../assets/img/sale_more/charge.png'
import scxs from '../../../assets/img/sale_more/supermarket.png'
import cyxs from '../../../assets/img/sale_more/catering.png'
import fkxs from '../../../assets/img/sale_more/guest-room.png'
import wyshxs from '../../../assets/img/sale_more/Property.png'

const emit = defineEmits(['closeChild']);
const closeCurrent = function (){
  emit('closeChild')
}
const dataList = ref([]);
getDataList();
/**
 * 获取服务区档案信息
 */
async function getDataList() {

  dataList.value = [{
      src: yzxs,
      title: '油站销售',
      zjl: '-56.74%',
      snwc: '23085.61万元',
      jnwc: '9986.64万元'
    },
    {
      src: jqxs,
      title: '加气销售',
      zjl: '-70.95%',
      snwc: '8653.84万元',
      jnwc: '2513.56万元'
    },
    {
      src: cdxs,
      title: '充电销售',
      zjl: '-73.27%',
      snwc: '12020.23万元',
      jnwc: '3212.41万元'
    },{
      src: scxs,
      title: '商超销售',
      zjl: '-69.74%',
      snwc: '82800.82万元',
      jnwc: '25054.59万元'
    },{
      src: cyxs,
      title: '餐饮销售',
      zjl: '-65.10%',
      snwc: '12930.52万元',
      jnwc: '4512.81万元'
    },{
      src: fkxs,
      title: '房客销售',
      zjl: '-75.21%',
      snwc: '3682.76万元',
      jnwc: '912.78万元'
    },{
      src: wyshxs,
      title: '物业商户销售',
      zjl: '-65.24%',
      snwc: '12982.36万元',
      jnwc: '4512.63万元'
    }];
}
</script>

<style scoped>
.dy-panel-main{
  padding:2.5vh;
}

.dy-content-md{
  display: flex;
  flex-wrap: wrap;
  .dy-md-x4{
    width: 33.333%;
    display: flex;
    margin: 2.5vh 0;
    .dy-md-x4-left{
      width: 72px;
      text-align: center;
      .dy-md-x4-center{
        font-size: 12px;
      }
    }
    .dy-md-x4-right{
      font-size: 12px;
      padding-left: 20px;
      .dy-md-x4-p{
        display: flex;
        padding-bottom: 5px;
        .dy-md-x4-p-text{
          width: 60px;
        }
      }
    }
  }
}
</style>
